<template>
    <div>
        <!-- quill-editor插件标签 分别绑定各个事件-->
        <quill-editor v-model="content" ref="myQuillEditor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
                      @change="onEditorChange($event)">
        </quill-editor>
        <div class="limit">当前已输入 <span>{{nowLength}}</span> 个字符，您还可以输入 <span>{{SurplusLength}}</span> 个字符。</div>
        <!-- 文件上传input 将它隐藏-->
        <el-upload class="upload-demo" :action="qnLocation" :before-upload='beforeUpload' :data="uploadData" :on-success='upScuccess'
                   ref="upload" style="display:none">
            <el-button size="small" type="primary" id="imgInput" v-loading.fullscreen.lock="fullscreenLoading" element-loading-text="插入中,请稍候">点击上传</el-button>
        </el-upload>
    </div>
</template>
<style lang="scss">
    .quill-editor {
        height: 745px;
        .ql-container {
            height: 680px;
        }
    }

    .limit {
        height: 30px;
        border: 1px solid #ccc;
        line-height: 30px;
        text-align: right;
        span {
            color: #ee2a7b;
        }
    }

    .ql-snow .ql-editor img {
        max-width: 480px;
    }
    .ql-editor .ql-video {
        max-width: 480px;
    }
</style>
<script>
    import Vue from 'util/vueExt'
    import { Component } from 'vue-property-decorator'
    import * as Template from './editor.vue'
    import * as Quill from 'quill'    // 引入编辑器

    const STATICDOMAIN = '//ss.yidejia.com/'
    const STATVIDEO = '//flv.yidejia.com/'

    @Component({
        mixins: [Template]
    })
    export default class Editor extends Vue {
        content = ''    // 文章内容
        editorOption = {}    // 编辑器选项
        addRange: any = new Array()
        uploadData = {}
        photoUrl = ''         // 上传图片地址
        uploadType = ''    // 上传的文件类型（图片、视频）
        fullscreenLoading = false

        $refs: {
            myQuillEditor: any,
            imgInput: any
        }

        get nowLength() {
            return this.content.length
        }

        get SurplusLength() {   // 计算属性 获得当前输入字符长度
            let num = 10000 - Number(this.content.length);
            if (num > 0) {
                return num
            } else {
                return 0
            }
        }

        // 上传七牛的actiond地址
        get qnLocation() {
            if (location.protocol === 'http:') {
                return 'http://up-z0.qiniu.com'
            }
            return 'https://up-z0.qbox.me'
        }

        // 图片上传前获得数据token数据
        qnUpload(file) {
            this.fullscreenLoading = true
            const suffix = file.name.split('.')
            const ext = suffix.splice(suffix.length - 1, 1)[0]
            console.log(this.uploadType)
            if (this.uploadType === 'image') {  // 如果是点击插入图片
                return this.api.getQNToken().then(res => {
                    this.uploadData = {
                        key: `image/${suffix.join('.')}_${new Date().getTime()}.${ext}`,
                        token: res
                    }
                })
            } else if (this.uploadType === 'video') {  // 如果是点击插入视频
                return this.api.getVideoQNToken().then(res => {
                    this.uploadData = {
                        key: `video/${suffix.join('.')}_${new Date().getTime()}.${ext}`,
                        token: res
                    }
                })
            }
        }

        // 图片上传之前调取的函数
        beforeUpload(file) {
            return this.qnUpload(file)
        }

        // 图片上传成功回调   插入到编辑器中
        upScuccess(e, file, fileList) {
            this.fullscreenLoading = false
            let vm = this;
            let url = ''
            if (this.uploadType === 'image') {    // 获得文件上传后的URL地址
                url = STATICDOMAIN + e.key
            } else if (this.uploadType === 'video') {
                url = STATVIDEO + e.key
            }
            if (url != null && url.length > 0) {  // 将文件上传后的URL地址插入到编辑器文本中
                let value = url
                vm.addRange = vm.$refs.myQuillEditor.quill.getSelection()
                value = value.indexOf('http') !== -1 ? value : 'http:' + value
                vm.$refs.myQuillEditor.quill.insertEmbed(vm.addRange !== null ? vm.addRange.index : 0, vm.uploadType, value, Quill.sources.USER)   // 调用编辑器的 insertEmbed 方法，插入URL
            } else {
                (<any>this).$message.error(`${vm.uploadType}插入失败`)
            }
            this.$refs['upload'].clearFiles()    // 插入成功后清除input的内容
        }

        // 点击图片ICON触发事件
        imgHandler(state) {
            this.addRange = this.$refs.myQuillEditor.quill.getSelection()
            if (state) {
                let fileInput = document.getElementById('imgInput')
                fileInput.click() // 加一个触发事件
            }
            this.uploadType = 'image'
        }

        // 点击视频ICON触发事件
        videoHandler(state) {
            this.addRange = this.$refs.myQuillEditor.quill.getSelection()
            if (state) {
                let fileInput = document.getElementById('imgInput')
                fileInput.click() // 加一个触发事件
            }
            this.uploadType = 'video'
        }

        // 编辑器光标离开 将编辑器内容发射给父组件
        onEditorBlur(editor) {
            this.$emit('getValue', this.content)
        }

        // 编辑器获得光标
        onEditorFocus(editor) {
            editor.enable(true)   // 实现达到上限字符可删除
        }

        // 编辑器文本发生变化
        onEditorChange({ editor, html, text }) {
            let textLength = text.length
            if (textLength > 10000) {
                (<any>this).$message.error('最多输入10000个字符')
                editor.enable(false)
            }
            this.$emit('getValue', this.content)
        }

        // 清除编辑器内容
        callMethod() {
            this.content = ''
        }

        // 页面加载后执行 为编辑器的图片图标和视频图标绑定点击事件
        mounted() {
            // 为图片ICON绑定事件  getModule 为编辑器的内部属性
            this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('image', this.imgHandler)
            this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('video', this.videoHandler)  // 为视频ICON绑定事件
        }
    }
</script>